<template>
    <div>
        <CommonTable 
        :columns="columns" 
        :dataSource="tableData" 
        :options="options"
        :fetch="fetchTableData"
        :pagination="pagination"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
        />
        <el-dialog
        title="房产信息"
        :visible.sync="dialogVisible"
        width="30%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="所属公司">
                    <el-input v-model="form.company" disabled></el-input>
                </el-form-item>
                <el-form-item label="房产编码">
                    <el-input v-model="form.code" disabled></el-input>
                </el-form-item>
                <el-form-item label="房产名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="form.dateTime" disabled></el-input>
                </el-form-item>
                <el-form-item label="房产地址">
                    <el-input v-model="form.addr"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios'
import CommonTable from '@/components/table'
export default {
    components: {
        CommonTable
    },
    data(){
      return {
        columns: [
            {
                prop: 'company',
                label: '所属公司',
            },
            {
                prop: 'code',
                label: '房产编码',
            },
            {
                prop: 'name',
                label: '房产名称'
            },
            {
                prop: 'dateTime',
                label: '创建时间'
            },
            {
                prop: 'addr',
                label: '房产地址'
            },
            {
                button: true,
                label: '按钮组',
                group: [{
                    // you can props => type size icon disabled plain
                    name: '编辑',
                    type: 'warning',
                    icon: 'el-icon-edit',
                    plain: true,
                    onClick: (row, index) => { // 箭头函数写法的 this 代表 Vue 实例 
                      //console.log(row);
                      this.form.company = row.company;
                      this.form.code = row.code;
                      this.form.name = row.name;
                      this.form.dateTime = row.dateTime;
                      this.form.addr = row.addr;
                      this.dialogVisible = true
                    }
                }, 
                {
                    name: '删除',
                    type: 'danger',
                    icon: 'el-icon-delete',
                    disabled: false,
                    onClick: (row, index) => {// 这种写法的 this 代表 group 里的对象
                       this.$confirm('是否进行删除操作?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$message({
                                message: '对不起,您没有权限进行该操作!',
                                type: 'error'
                            });
                            this.dialogVisible = false
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });          
                        }); 
                    }
                }
            ]
          },
        ],
        dialogVisible: false,
        form: {
          code: '',
          company: '',
          name: '',
          dateTime: '',
          addr: ''
        },
        tableData: [
        ],
        pagination: {
            total: 0,
            pageIndex: 1,
            pageSize: 10
        },
        options: {
            mutiSelect: true,
            index: true, // 显示序号， 多选则 mutiSelect
            loading: false, // 表格动画
            initTable: true, // 是否一挂载就加载数据
        }
    }
    },
    methods: {
        tabsClick(tab, event){
        console.log(tab, event);
        },
        handleClick(e, row){
            e.cancelBubble = true // 停止冒泡，否则会触发 row-click
            console.log(row)
        },
        fetchTableData() {
            this.options.loading = true
            axios.post('https://www.easy-mock.com/mock/5cb04e65601f9652ee871c6b/example/tabs_first', {
                page: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize
            }).then(res => {
                const { list, total } = res.data.data
                this.tableData = list
                this.pagination.total = total
                this.options.loading = false
            }).catch((error) => {
                console.log(error)
                this.options.loading = false
            })
        },
        handleRowClick(row, event, column){ // 点击行的事件，同理可以绑定其他事件
            console.log('click row:',row, event, column)
        },
        handleSelectionChange(selection){
            console.log(selection)
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        serializeForm:function(formId){
            var elements = getElements(formId);  
            var queryComponents = new Array();  
            
            for (var i = 0; i < elements.length; i++) {  
            var queryComponent = serializeElement(elements[i]);  
            if (queryComponent)  
                queryComponents.push(queryComponent);  
            }  
            
            return queryComponents.join('&'); 
        },
        onSubmitDialog(){
            this.$confirm('是否保存编辑操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    message: '恭喜你，操作成功!',
                    type: 'success'
                });
                this.dialogVisible = false
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            }); 
        }
    }
}
</script>
